<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<title>Client Home</title>
</head>
<body class="gray-bg">

	<!--Header-->
	<div class="header-div" id="top">
		<div class="mid-header clearfix">
			<a href="home.html" class="logo-font">Delicious</a> <span
				class="header-right-box"> <!--<a href="${pageContext.request.contextPath }/linkRegister" class="header-link-box"><button type="button">Login</button></a>-->
				<!--<span> | </span>--> <!--<a href="${pageContext.request.contextPath }/linkLogin" class="header-link-box"><button type="button">Register</button></a>-->

				<span class="wlc-font">Welcome, Avril</span> <a
				href="javascript:void(0)" class="header-link-box"><button
						type="button">查看订单</button></a> <span> | </span> <a
				href="javascript:void(0)" class="header-link-box"><button
						type="button">注销</button></a>
			</span>
		</div>
	</div>


	<div class="mid-nav center outer-carousel">
		<div id="carousel-example-generic" class="carousel slide"
			data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0"
					class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>

			<!-- Wrapper for slides -->
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<a href="javascript:void(0)"> <img src="./img/1.jpg">
						<div class="carousel-caption">M记</div>
					</a>
				</div>
				<div class="item">
					<a href="javascript:void(0)"> <img src="./img/2.jpg">
						<div class="carousel-caption">必胜客</div>
					</a>
				</div>
				<div class="item">
					<a href="javascript:void(0)"> <img src="./img/3.jpg">
						<div class="carousel-caption">贡茶</div>
					</a>
				</div>
			</div>

			<!-- Controls -->
			<a class="left carousel-control" href="#carousel-example-generic"
				role="button" data-slide="prev"> <span
				class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a> <a class="right carousel-control" href="#carousel-example-generic"
				role="button" data-slide="next"> <span
				class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>


	<div class="mid-nav shadow-div">
		<div class="row list-row">

			<div class="col-sm-4 col-md-3">
				<div class="thumbnail">
					<i class="inside-icon glyphicon glyphicon-search"></i> <a href="#">
						<img src="./img/07.jpg" class="home-img">
						<div class="caption">
							<h3>Merchant 001</h3>
							<div class="row no-margin">
								<div class="col-md-8">
									<span class="glyphicon glyphicon-phone-alt tel-icon"></span> <b>13912345678</b>
								</div>
								<div class="col-md-4">
									<span>4.5分</span>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<c:forEach var="merchant" items="${merchants }">
				<div class="col-sm-4 col-md-3">
					<input type="text" value="${merchant.mId }" style="display: none;" />
					<div class="thumbnail">
						<i class="inside-icon glyphicon glyphicon-search"></i> <a
							href="showFood?mId=${merchant.mId.intValue()}"> <img
							src="${merchant.mLogoPath }" class="home-img">
							<div class="caption">
								<h3>${merchant.mBrand }</h3>
								<div class="row no-margin">
									<div class="col-md-8">
										<span class="glyphicon glyphicon-phone-alt tel-icon"></span> <b>${merchant.mTel }</b>
									</div>
									<div class="col-md-4">
										<span>${merchant.mStark }分</span>
									</div>
								</div>
							</div>
						</a>
					</div>
				</div>
			</c:forEach>

		</div>
	</div>





	<a href="#top">
		<div class="top-box">
			<span class="glyphicon glyphicon-chevron-up back-icon"></span>
		</div>
	</a>

</body>
</html>